<html>
    <head>
        <link href="{{=URL(r=request, c='static/styles', f='style.css')}}"
                rel="stylesheet" type="text/css"/>

        <script src="/{{=request.application}}/static/js/jquery.js" type="text/javascript"></script> 
        <script src="/{{=request.application}}/static/js/jquery.form.js" type="text/javascript"></script> 
        <script src="/{{=request.application}}/static/js/jquery.history.js" type="text/javascript"></script> 
        <script src="/{{=request.application}}/static/js/jquery.validate.js" type="text/javascript"></script> 
        <script src="/{{=request.application}}/static/js/jquery.form.wizard-2.0.1-min.js" type="text/javascript"></script>
        <script src="/{{=request.application}}/static/js/jquery.dimensions.js" type="text/javascript"></script>
        <script src="/{{=request.application}}/static/js/jquery.tooltip.js" type="text/javascript"></script>

        <script type = 'text/javascript'>
            $(document).ready(
            function(){
            
             $(':input').live('click load change', // on event, on/off switches
            function(){                           // turn green/red accordingly
                if ($(this).val() == 'on')
                {
                    $(this).css('color','white');
                    $(this).css('background-color','green');
                }

                else if ($(this).val() == 'off')
                {
                    $(this).css('color','white');
                    $(this).css('background-color', 'red');
                }
            });
        
        function hideSaveIfLastStep()   // make the Save and Quit button invisible on the last step
        {
            if (form.isLastStep)    // variable from the form wizard code
                $('#save_and_quit').css('visibility','hidden');
            else
                $('#save_and_quit').css('visibility','visible');
        }
            
        $('#save_and_quit').click(
            function(){
                form.isLastStep = true;     // push to the last page
                form.nextButton.click();    // and make it act like the submit button
                }
            );
        
        $('#db_type').change (  // mysql requires username and password
            function(){         // the other ones don't
                if ($(this).val() != 'mysql')
                    $('[name="password"], [name="username"]').css('display','none').removeClass('required');
                else
                    $('[name="password"], [name="username"]').css('display','inline').addClass('required');
                    
            });
        
        $('#hmac_key').addClass('hmac_key');
        
        $(':input').change();   // load of element does not trigger it
                                // so this "touches" it to change color on load
        $(':input').tooltip(
            {
                track: true     // tooltip follows mouse around
            }
        );
        
      $("#theForm").formwizard({ 
        //form wizard settings
        historyEnabled : true, // lets you use browser back/forth
        formPluginEnabled: false, // ajax submission
        validationEnabled : true,  // required, validate email, etc
        afterNext: hideSaveIfLastStep,  // Save and Quit button hide / show
        afterBack: hideSaveIfLastStep
        },
       {
         errorClass: 'color_red',
         success: function(label){
                $(':reset').enabled = false;
             }
       },
       {
         //debug: true
       }
      );
      });
  </script>

        </script>
    </head>
    <body>
        <img src="/{{=request.application}}/static/img/sahana-eden_logo.gif" id="logo" alt="Sahana Eden" />
        <h2>Sahana Eden Web Setup</h2>
        {{=form}}
    </body>
</html>
